<template>
  <div v-if="awardDetail.deliverystatus" class="app-height-100vh app-flex app-column" style="overflow: hidden">
    <div class="px-4 py-2 app-no-grow-shrink app-v-center app-h-between">
      <div class="pl-2 mr-2">
        <span style="color: #30aa21">{{ awardDetail.expName }}</span>:{{ awardDetail.number }}
      </div>
      <img :src="awardDetail.logo" class="app-circle app-wh-48px" alt="">
    </div>
    <div class="px-6 app-word-nowrap">
      <div class="app-flex app-font-14 pb-3">
        <div class="app-width-25p app-h-end font-weight-bold" style="letter-spacing: 4px">奖品名称</div>：
        <div style="color: #6f6f6f">{{ awardDetail.name }}</div>
      </div>
      <div class="app-flex app-font-14 pb-3">
        <div class="app-width-25p app-h-end font-weight-bold" style="letter-spacing: 4px">奖品数量</div>：
        <div style="color: #6f6f6f">{{ awardDetail.count }}</div>
      </div>
      <div class="app-flex app-font-14 pb-3">
        <div class="app-width-25p app-h-end font-weight-bold" style="letter-spacing: 10px">收件人</div>：
        <div style="color: #6f6f6f">{{ awardDetail.consigneeName }}</div>
      </div>
      <div class="app-flex app-font-14 pb-3">
        <div class="app-width-25p app-h-end font-weight-bold" style="letter-spacing: 4px">物流公司</div>：
        <div style="color: #6f6f6f">{{ awardDetail.expName }}</div>
      </div>
      <div class="app-flex app-font-14 pb-3">
        <div class="app-width-25p app-h-end font-weight-bold" style="letter-spacing: 4px">物流单号</div>：
        <div style="color: #6f6f6f">{{ awardDetail.number }}</div>
      </div>
    </div>
    <div style="height: 16px;background:#f2f2f2" />
    <div class="font-weight-bold pl-6 pt-2">物流详情</div>
    <div class="app-flex-1 py-2 px-4" style=" overflow-y: auto;overflow-x: hidden;">
      <div class="pt-2 app-flex mb-8">
        <div class="app-width-10p">
          <img class="app-wh-18px" :src="require('@/assets/ttt/icon3.png')" alt="">
        </div>
        <div class="app-flex-1">
          <div class="font-weight-bold pb-2">
            物流状态({{ deliverystatus(awardDetail.deliverystatus) }})
          </div>
          <div class="app-font-14" style="color: #6f6f6f;line-height: 1.5">
            {{ awardDetail.list[0].time }}
          </div>
          <div class="app-font-14" style="color: #6f6f6f;line-height: 1.5">
            {{ awardDetail.list[0].status }}
          </div>
        </div>
      </div>
      <div v-for="item,index in awardDetail.list" :key="index" class="pt-2 app-flex mb-8">
        <div class="app-width-10p pl-1">
          <img class="app-wh-8px" :src="require('@/assets/ttt/icon4.png')" alt="">
        </div>
        <div class="app-flex-1">
          <div class="app-font-14" style="color: #6f6f6f;line-height: 1.5">
            {{ item.time }}
          </div>
          <div class="app-font-14" style="color: #6f6f6f;line-height: 1.5">
            {{ item.status }}
          </div>
        </div>
      </div>
    </div>
  </div>
  <div v-else class="py-16 app-hv-center app-column">
    <i class="el-icon-loading mb-2" />
    加载中...
  </div>
</template>

<script>
import Vue from 'vue'
import { getLocation } from '@/api/dispatch'
export default Vue.extend({
  data() {
    return {
      awardDetail: {},
      activityInfo: {}
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    deliverystatus(status) {
      // 0：快递收件(揽件)1.在途中 2.正在派件 3.已签收 4.派送失败 5.疑难件 6.退件签收
      return status === '0'
        ? '快递收件(揽件)'
        : status === '1'
          ? '在途中'
          : status === '2'
            ? '正在派件'
            : status === '3'
              ? '已签收'
              : status === '4'
                ? '派送失败'
                : status === '5'
                  ? '疑难件'
                  : '退件签收'
    },
    getDetail() {
      getLocation({ id: Number(this.$route.query.id) }).then(res => {
        if (res.code === 200) {
          this.awardDetail = res.data
        }
      })
    }
  }
})
</script>

<style lang="scss" scoped>
::v-deep .el-menu-item {
    padding: 0;
    margin: 0 20px;
}
::v-deep .el-collapse-item__arrow {
    margin: 0 12px;
}

.two-line {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 这里是超出几行省略 */
    overflow: hidden;
}
.line {
  width: 1px;
  position: relative;
  height: 40px;
  background: #297bff;
}

.line::before {
      content: "";
      width: 8px;
      height: 8px;
      border: solid #297bff;
      border-width: 1px 1px 0 0;
      transform: translate(-54%, -28px) rotate(-45deg);
      position: absolute;
      left: 50%;
      top: 70%;
}
</style>>

